<template>
	<view class="cu-card case">
		<view class="cu-item shadow">
			<view class="text-content">投诉编号:{{dataDetail.COMPLAINT_ID}}</view>
			<view class="text-content">{{dataDetail.CONTENT}}</view>
			<view class="grid flex-sub padding-lr col-3 grid-square">
				<view class="bg-img" v-for="(item,index) in imageList" :key="index" @tap="ViewImage" :data-url="imageList[index]">
				 <image :src="imageList[index]" mode="aspectFill"></image>
				</view>
			</view>
			<view class="time-view">{{dataDetail.CREATETIME}}</view>
			
		</view>
		<view class="line-view"></view>
		<view class="cu-item" v-if="dataDetail.STATE != '-1'">
			<view class="text-content">处理结果:</view>
			<!-- <view class="text-content">{{dataDetail.RELPYCONTENT}}</view> -->
			<view class="text-content">
				<rich-text :nodes="dataDetail.RELPYCONTENT"></rich-text>
			</view>
			<view class="time-view">{{dataDetail.REPLYTIME}}</view>
			<navigator v-if="dataDetail.RELPYCONTENT" :url= "dataDetail.STAR ==undefined ? 'complainScore?complainId='+dataDetail.COMPLAINT_ID : 'complainScoreDetail?complainId='+dataDetail.COMPLAINT_ID">
				<view class="navigator_btn">{{dataDetail.STAR ==undefined ? "我要评分" : "我的评分"}}</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataDetail:{},
				imageList:[], 
				complainId : ''
			}
		},
		onLoad(option) {
			this.complainId = option.complainId;
			this.getDataList();
		},
		onShow() {
			try {
			    const value = uni.getStorageSync('complainscore');
			    if (value == 'complainscore') {
			        this.getDataList();
			        uni.setStorageSync('complainscore', '');
			    }
			} catch (e) {
			    // error
			}
		},
		methods: {
			getDataList() {
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				uni.request({
					url: this.websiteUrl + 'appim/getComplaintDetail',
					method: 'GET',
					data: {"COMPLAINT_ID" : this.complainId},
					success: res => {
						console.log(res);
						var detail = res.data.data;
						this.dataDetail = detail;
						this.imageList = detail.PICS.split(',');
						console.log(this.imageList)
					},
					fail: (res) => {
						
					},
					complete: (res) => {
						uni.hideLoading();
					}
				});
			},
			gotoDetail(complainId) {
				console.log(complainId);
				uni.navigateTo({
					url: '',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imageList,
					current: e.currentTarget.dataset.url
				});
			},
		},
	}
</script>

<style>
	.text-content {
		margin-bottom: 10px;
		font-size: 14px;
	}
	.cu-card {
		background-color: #FFFFFF;
		margin-top: 10px;
	}
	.text-sm {
		display: inline-block;
	}
	.time-view {
		text-align: right;
		color: #a6a6a6;
		margin-top: 10px;
	}
	.line-view {
		height: 10px;
		background-color: #F8F8F8;
	}
	.navigator_btn {
		background-color: #19c99a;
		color: white;
		border: 1px solid #19C99A;
		border-radius: 4px;
		font-size: 14px;
		padding:5px 10px;
		width: 30%;
		margin-left: 35%;
		text-align: center;
		margin-top: 30px;
	}
	.navigator_btn:after {
		border: none;
	}
	
</style>
